<script>
init({
  title: 'Filter Options',
  desc: 'Use `filterOptions` option to define the default filter options of algorithm. In this case, we are using `bootstrapTable(\'filterBy\', {id: 3, price: \'$1\'})`.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<script>
  const $table = $('#table')

  function mounted () {
    $table.bootstrapTable({
      toolbar: '.toolbar',
      columns: [
        {
          title: 'ID',
          field: 'id'
        },
        {
          title: 'Item Name',
          field: 'name'
        },
        {
          title: 'Item Price',
          field: 'price'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Item 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Item 3',
          price: '$1'
        },
        {
          id: 4,
          name: 'Item 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Item 5',
          price: '$5'
        }
      ]
    })

    $('#filterBy').click(function () {
      const filterAlgorithm = $('[name="filterAlgorithm"]').val()

      $table.bootstrapTable('refreshOptions', {
        filterOptions: {
          filterAlgorithm
        }
      })

      $table.bootstrapTable('filterBy', {
        id: 3,
        price: '$1'
      })
    })
  }
</script>

<template>
  <div class="toolbar">
    <select
      id="select"
      class="form-control"
      name="filterAlgorithm"
    >
      <option
        value="and"
        selected
      >
        and
      </option>
      <option value="or">
        or
      </option>
    </select>
    <button
      id="filterBy"
      class="btn btn-secondary"
    >
      filterBy
    </button>
  </div>

  <table id="table"></table>
</template>

<style>
#select {
  width: 100px;
  display: inline-block;
}
</style>
